<script setup lang="ts">
import { specifyTableData } from "@/views/medSupCatalog/mockData.ts";
import { SpecificationTableData, VarietyTableData } from "@/interface/medSupCatalog.ts";
import { ElTable } from 'element-plus'
import { inject } from 'vue'
import { TreeNode } from "@/interface/commonTypes.ts";

defineOptions({
  // 规格table
  name: 'SpecificationTable'
})

const columns = reactive([
  {
    label: '国家编码',
    prop: 'countryCode',
  },
  {
    label: '编码',
    prop: 'code',
  },
  {
    label: '规格',
    prop: 'specification',
  },
  {
    label: '厂家',
    prop: 'manufacturer',
  },
  {
    label: '商品名',
    prop: 'name',
  },
  {
    label: '服务对象',
    prop: 'serviceObject',
  },
  {
    label: '材料来源',
    prop: 'materialSource',
  },
  {
    label: '自制',
    prop: 'selfMade',
  },
  {
    label: '协定',
    prop: 'agreement',
  },
  {
    label: '招标',
    prop: 'tender',
  },
  {
    label: '注册证号',
    prop: 'registrationNumber',
  },
  {
    label: '合同单位',
    prop: 'contractUnit',
  },
  {
    label: '说明',
    prop: 'description',
  },
  {
    label: '备选码',
    prop: 'alternativeCode',
  },
]);

const tableData = ref<SpecificationTableData[]>(specifyTableData)

// 当前选择的行数据
const currentRow = ref<SpecificationTableData | null>(null)
// 表格的ref对象
const tableRef = ref<InstanceType<typeof ElTable>>()
// 表格操作按钮禁用状态
const isDisabled = computed(() => {
  return !currentRow.value
})

const handleCurrentChange = (row: SpecificationTableData | null) => {
  currentRow.value = row
  tableRef.value?.setCurrentRow(row)
  console.log(`2当前选择的行:`, row)
}
// 监听分类选择
const selectClassify = inject<Ref<TreeNode | null>>('selectClassify')

// 监听品种选择
const selectVarietyRow = inject<Ref<VarietyTableData | null>>('selectVarietyRow')

watch(() => selectClassify, () => {
  console.log('当前选择的分类：', selectClassify?.value?.label);
}, {deep: true})

watch(() => selectVarietyRow, () => {
  console.log('当前选择的品种：', selectVarietyRow?.value?.name);
}, {deep: true})
</script>

<template>
  <el-row>
    <el-col :span="24" class="mb10">
      <el-button type="primary" plain :disabled="isDisabled">新建规格</el-button>
      <el-button type="primary" plain :disabled="isDisabled">修改规格</el-button>
      <el-button type="primary" plain :disabled="isDisabled">删除规格</el-button>
      <el-button type="primary" plain :disabled="isDisabled">储存库房</el-button>
      <el-button type="primary" plain :disabled="isDisabled">储备限量</el-button>
      <el-button type="primary" plain :disabled="isDisabled">启用</el-button>
      <el-button type="danger" plain :disabled="isDisabled">停用</el-button>
    </el-col>
  </el-row>
  <div class="table-box">
    <sTable
      :columns="columns"
      :tableData="tableData"
      :hasPage="true"
      :page="{
        pageNumber: 1,
        pageSize: 10,
        total: 20,
      }"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">
.table-box {
  height: calc(100% - 111px);
}
</style>
